<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .page-size {
            list-style: none;
            display: flex;
        }

        .page-size li {
            width: 40px;
            height: 40px;
            text-align: center;
            background: #ededed;
            margin-right: 10px;
            line-height: 40px;
            color: blue;
        }

        .page-size li.active {
            background: lightblue;
        }
    </style>
</head>

<body>
    <ul id="page" class="page-size">

    </ul>
    <ul id="page2" class="page-size">

    </ul>
    <script>


        //面向过程
        let result = {
            pageNums: 10,
            currentPage: 2
        };

        // let pageBox=document.getElementById("page");

        //循环添加10个li
        // for(let i=1;i<result.pageNums;i++){
        //     let tempLi=document.createElement("li");
        //     tempLi.innerText=i;

        //     if(i==result.currentPage){
        //         tempLi.classList.add("active");
        //     }
        //     pageBox.appendChild(tempLi);
        // }


        // 面向对象
        // ES6中 class构造函数代码(封装：对实例的所有操作，应该被对应的构造器进行统一管理)

        class PageView {
            //填充代码实现功能
            constructor(options = {}) {
                let pageBox = document.querySelector(options.el);
                for (let i = 1; i < options.data.pageNums; i++) {
                    let tempLi = document.createElement("li");
                    tempLi.innerText = i;

                    if (i == options.data.currentPage) {
                        tempLi.classList.add("active");
                    }
                    pageBox.appendChild(tempLi);
                }
            }
        }
        let pageObj = new PageView({
            el: "#page",
            data:result
        });

        new PageView({
            el: "#page2",
            data:{
                pageNums:30,
                currentPage:3
            }
        });
    </script>
</body>

</html>